<template>
  <div class="weblog">
    <div class="bokek">
      <h1>Weblog 博客登录</h1>
      <img
        src="http://47.104.167.34:9110/assets/login-logo-57e339e7.png"
        alt=""
      />
    </div>
    <div class="login-container">
      <div class="login-box">
        <h1 class="welcome-title">欢迎回来</h1>
        <span class="xiantiao"> —————— </span>
        <span class="login-type">账号密码登录</span>
        <span class="xiantiao"> —————— </span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              class="login-btn"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    async getLogin(username, password) {
      try {
        // 注意：请求路径是 /api/login（代理会转发到后端的 /login）
        let res = await this.$axios.post("/login", {
          username: username,
          password: password,
        });
        console.log(res); // 查看后端返回的完整数据
        console.log(res.data.data.token);
        
        if (res.data.data.token) {
          localStorage.setItem("token", res.data.data.token); // 存储 token
          this.$message.success("登录成功");
          this.$router.push("/houtai");
        } else {
          this.$message.error("登录失败，未返回 token");
        }
      } catch (error) {
        console.error("登录请求错误：", error);
        this.$message.error("网络异常或接口错误，请稍后再试");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getLogin(this.ruleForm.username, this.ruleForm.password);
        } else {
          console.log("表单验证失败!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.weblog {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
}
.bokek {
  width: 70%;
  height: 100%;
  background-color: #001428;
}
.bokek h1 {
  color: #fff;
  margin-top: 6.875rem;
  font-size: 2.5625rem;
}
.bokek img {
  width: 28.125rem;
  height: 28.125rem;
}
.login-container {
  width: 30%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.login-box {
  width: 350px;
  text-align: center;
}

.welcome-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 10px;
}

.login-type {
  font-size: 16px;
  color: #9ca3af;
  margin-bottom: 20px;
  position: relative;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

.login-form .el-input {
  width: 100%;
  border-radius: 8px;
}

.login-btn {
  width: 100%;
  border-radius: 20px;
  font-size: 16px;
}
.xiantiao {
  color: #e5e7eb;
}
</style>